<template>
  <view class="order-detail-page" v-if="detail">
    <!-- 顶部状态 -->
    <view class="status-bar">
      <text class="status">{{ detail.status_text }}</text>
      <text class="order-no">订单号：{{ detail.order_no }}</text>
    </view>

    <!-- 收货信息 -->
    <view class="block address">
      <view class="addr-hd">
        <text class="name">{{ detail.address?.name }}</text>
        <text class="phone">{{ detail.address?.phone }}</text>
      </view>
      <view class="addr-bd">{{ fullAddress }}</view>
    </view>

    <!-- 商品清单 -->
    <view class="block goods">
      <view class="good" v-for="g in detail.goods" :key="g.id">
        <image class="thumb" :src="g.image" mode="aspectFill" />
        <view class="gi">
          <text class="name">{{ g.name }}</text>
          <text class="meta">¥{{ g.price }} x {{ g.quantity }}</text>
        </view>
        <text class="amount">¥{{ g.total_amount || (Number(g.price) * Number(g.quantity)).toFixed(2) }}</text>
      </view>
    </view>

    <!-- 金额汇总 -->
    <view class="block amounts">
      <view class="row"><text>商品金额</text><text>¥{{ detail.total_amount }}</text></view>
      <view class="row"><text>运费</text><text>¥{{ detail.freight_amount }}</text></view>
      <view class="row"><text>优惠</text><text>-¥{{ detail.discount_amount }}</text></view>
      <view class="row total"><text>实付金额</text><text class="pay">¥{{ detail.pay_amount }}</text></view>
    </view>

    <!-- 底部操作栏 -->
    <view class="footer" v-if="detail">
      <button v-if="detail.status === 'pending_pay'" class="btn cancel" @tap="cancelOrder">取消订单</button>
      <button v-if="detail.status === 'pending_pay'" class="btn pay" @tap="payOrder">立即支付</button>
      <button v-if="detail.status === 'delivering' || detail.status === 'accepted'" class="btn confirm" @tap="confirmOrder">确认收货</button>
    </view>
  </view>
  <view v-else class="loading">加载中…</view>
</template>
<script setup>
// 中文注释：订单详情页
import { ref, computed, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { orderApi } from '@/api/index.js'

const { proxy } = getCurrentInstance()

const id = ref('')
const detail = ref(null)
const loading = ref(false)

const fullAddress = computed(() => {
  const a = detail.value?.address
  if (!a) return ''
  return `${a.province || ''}${a.city || ''}${a.district || ''}${a.detail || ''}`
})

const fetchDetail = async () => {
  if (!id.value) return
  loading.value = true
  try {
    detail.value = await orderApi.getOrderDetail(id.value)
  } catch (e) {
    proxy?.$showToast?.('加载失败')
  } finally {
    loading.value = false
  }
}

const payOrder = async () => {
  try {
    await orderApi.payOrder({ order_id: id.value })
    uni.showToast({ title: '支付成功', icon: 'success' })
    fetchDetail()
  } catch (e) {}
}

const cancelOrder = () => {
  uni.showModal({
    title: '提示',
    content: '确认取消该订单吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await orderApi.cancelOrder(id.value, '用户取消')
          uni.showToast({ title: '已取消', icon: 'none' })
          fetchDetail()
        } catch (e) {}
      }
    }
  })
}

const confirmOrder = () => {
  uni.showModal({
    title: '提示',
    content: '确认收到货物？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await orderApi.confirmOrder(id.value)
          uni.showToast({ title: '确认成功', icon: 'success' })
          fetchDetail()
        } catch (e) {}
      }
    }
  })
}

onLoad((options) => {
  id.value = options?.id || ''
  fetchDetail()
})
</script>
<style scoped lang="scss">
.order-detail-page { min-height: 100vh; background: $uni-bg-color-grey; padding-bottom: 140rpx; }
.status-bar { background: linear-gradient(90deg,#ff8a2b,#ff6b00); color: #fff; padding: 28rpx 24rpx; }
.status { font-size: 32rpx; font-weight: 600; }
.order-no { display: block; margin-top: 8rpx; font-size: 24rpx; opacity: .9; }

.block { background: #fff; border-radius: 16rpx; margin: 20rpx; padding: 20rpx; box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06); }
.address .addr-hd { display: flex; justify-content: space-between; color: #333; font-size: 28rpx; margin-bottom: 8rpx; }
.address .addr-bd { color: #666; font-size: 26rpx; line-height: 1.6; }

.goods .good { display: flex; align-items: center; padding: 12rpx 0; }
.thumb { width: 120rpx; height: 120rpx; border-radius: 12rpx; background: #f5f5f5; }
.gi { flex: 1; margin-left: 16rpx; }
.gi .name { font-size: 28rpx; color: #333; }
.gi .meta { font-size: 24rpx; color: #999; margin-top: 8rpx; }
.amount { color: #333; font-size: 28rpx; }

.amounts .row { display: flex; justify-content: space-between; padding: 10rpx 0; color: #333; font-size: 28rpx; }
.amounts .row.total { border-top: 1px solid $uni-border-color; margin-top: 10rpx; padding-top: 16rpx; }
.amounts .pay { color: $uni-color-primary; font-weight: 600; }

.footer { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; padding: 16rpx 20rpx; display: flex; justify-content: flex-end; gap: 16rpx; box-shadow: 0 -6rpx 18rpx rgba(0,0,0,.06); }
.btn { height: 72rpx; line-height: 72rpx; padding: 0 28rpx; border-radius: 999rpx; border: none; font-size: 28rpx; }
.btn.cancel { background: #f6f7f9; color: #333; }
.btn.pay { background: $uni-color-primary; color: #fff; }
.btn.confirm { background: $uni-color-primary; color: #fff; }

.loading { padding: 40rpx; text-align: center; color: #999; }
</style>
